<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 600px;
      height: 400px;
    }

    .box {
      color: red
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

</html>
<script src="../node_modules/echarts/dist/echarts.min.js"></script>
<script>
  let xData = [];
  for (let i = 1; i < 13; i++) {
    xData.push(i + '月')
  }
  console.log(xData)
  let charts = echarts.init(document.getElementById('box'));
  let option = {
    backgroundColor: '#11183c',
    grid: {
      left: '5%',
      right: '10%',
      top: '15%',
      bottom: '5%',
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      // formatter(obj) {
      //   console.log(obj)
      //   return `<h2 class='box'>${obj.seriesName}: ${obj.name} :${obj.value}</h2>`
      // },
      formatter(ary) {
        console.log(ary)
        return `<div>
          <h2 class='box'>${ary[0].seriesName}: ${ary[0].name} :${ary[0].value}</h2>
          <h2 class='box'>${ary[1].seriesName}: ${ary[1].name} :${ary[1].value}</h2>
        </div>`
      }
    },
    legend: {
      show: true,
      orient: 'horizontal',
      left: 'center',
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 15,
      // height: 150,
      padding: 20,
      backgroundColor: 'red',
      textStyle: {
        color: '#fff'
      },
      data: [{
        name: '已采纳'
      }, {
        name: '已发布'
      }]
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#397cbc',
          width: 2
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#30eee9"
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        // show: true,
        lineStyle: {
          color: '#27b4c2'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#11366e'
        }
      },
      axisLabel: {
        color: "#30eee9"
      }
    },
    series: [{
        type: 'line',
        name: "已采纳",
        symbol: "circle",
        symbolSize: 10,
        // stack: 'allData',
        data: [{
          name: 'qqq',
          value: 210,
          tooltip: {}
        }, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
      },
      {
        type: 'line',
        name: "已发布",
        symbol: "circle",
        symbolSize: 10,
        // stack: 'allData',
        data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
      }
    ]
  }
  charts.setOption(option);
</script>